<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <style>
      .card-stats .bi {
        width: 50px;
        height: 50px;
        display: block;
        background-color: #e4e4e4;
        color: #fff;
        border-radius: 50%;
        line-height: 50px;
        text-align: center;
        font-size: 24px;
        margin-top: 4px;
      }
    </style>
  </head>

  <body class="application application-offset">
    <div class="container-fluid container-application">
      <div class="sidenav show" id="sidenav-main">
        <!-- Sidenav header -->
        <div class="sidenav-header d-flex align-items-center">
          <a class="navbar-brand" href="./index.html">
            <span class="logo">·ITCAST·</span>
          </a>
        </div>
        <!-- User mini profile -->
        <div
          class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center"
        >
          <!-- Avatar -->
          <div>
            <a href="#" class="avatar rounded-circle avatar-xl">
              <img
                alt="Image placeholder"
                src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                class=""
              />
            </a>
            <div class="mt-5">
              <h5 class="mb-0 text-white">黑马前端</h5>
              <span class="d-block text-sm text-white opacity-8 mb-3"
                >数据可视化</span
              >
              <a
                href="javascript:;"
                class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3"
              >
                <span class="btn-inner--text">学前端来黑马</span>
              </a>
            </div>
          </div>
        </div>
        <!-- Application nav -->
        <div class="nav-application clearfix">
          <a href="./index.html" class="btn btn-square text-sm active">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-house bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">首页</span>
          </a>
          <a href="./student.html" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-people bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">学生</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-columns bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">排版</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-files bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">资料</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-receipt bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">就业</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"
              ><i class="bi bi-gear bi-2x"></i
            ></span>
            <span class="btn-inner--icon d-block pt-2">设置</span>
          </a>
        </div>
        <!-- Misc area -->
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <h5 class="text-white">哈喽, 朋友!</h5>
            <p class="text-white mb-4">
              为什么不现在开始学习前端，创造一些令人惊叹的东西呢？
            </p>
            <a
              href="http://itcast.cn"
              class="btn btn-sm btn-block btn-white rounded-pill"
              target="_blank"
              >Get started</a
            >
          </div>
        </div>
      </div>
      <div class="main-content position-relative">
        <nav
          class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border"
          id="navbar-main"
        >
          <div class="container-fluid">
            <!-- Navbar nav -->
            <div
              class="collapse navbar-collapse navbar-collapse-fade"
              id="navbar-main-collapse"
            >
              <ul class="navbar-nav align-items-lg-center">
                <!-- Home  -->
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html">
                    黑马程序员
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                </li>
              </ul>
              <!-- Right menu -->
              <ul
                class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex"
              >
                <li class="nav-item dropdown dropdown-animate">
                  <a
                    class="nav-link pr-lg-0"
                    href=".dropdown-menu"
                    role="button"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                    <div class="media media-pill align-items-center">
                      <span class="avatar rounded-circle">
                        <img
                          alt="Image placeholder"
                          src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
                        />
                      </span>
                      <div class="ml-2 d-none d-lg-block">
                        <span
                          class="mb-0 text-sm font-weight-bold"
                          id="username"
                          >Admin</span
                        >
                      </div>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" id="logout" href="javascript:;">
                    退出
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="page-content">
          <!-- Page Title -->
          <div class="page-title">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Dashboard</h5>
                <span class="text-sm text-white opacity-8">上海前端 xx 期</span>
              </div>
            </div>
          </div>
          <!-- charts -->
          <div class="row">
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">就业薪资</h6>
                      <span name="salary" class="h3 font-weight-bold mb-0"
                        >15500</span
                      >
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-coin"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">班级人数</h6>
                      <span
                        name="student_count"
                        class="h3 font-weight-bold mb-0"
                        >80</span
                      >
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-people"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">平均年龄</h6>
                      <span name="age" class="h3 font-weight-bold mb-0"
                        >24.40</span
                      >
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-calendar2-week"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card card-stats">
                <!-- Card body -->
                <div class="card-body">
                  <div class="row">
                    <div class="col">
                      <h6 class="text-muted mb-1">小组个数</h6>
                      <span name="group_count" class="h3 font-weight-bold mb-0"
                        >8</span
                      >
                    </div>
                    <div class="col-auto">
                      <i class="bi bi-collection"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col col-xl-8">
              <div class="card" id="line" style="height: 400px"></div>
            </div>
            <div class="col col-xl-4">
              <div class="card" id="salary" style="height: 400px"></div>
            </div>
            <div class="col col-xl-12">
              <div class="card" style="height: 400px">
                <div class="card-header">
                  <div
                    class="d-flex justify-content-between align-items-center"
                  >
                    <h6 class="mb-0">班级每组薪资</h6>
                    <div id="btns">
                      <button type="button" class="btn btn-xs btn-blue">
                        1
                      </button>
                      <button type="button" class="btn btn-xs">2</button>
                      <button type="button" class="btn btn-xs">3</button>
                      <button type="button" class="btn btn-xs">4</button>
                      <button type="button" class="btn btn-xs">5</button>
                      <button type="button" class="btn btn-xs">6</button>
                      <button type="button" class="btn btn-xs">7</button>
                      <button type="button" class="btn btn-xs">8</button>
                    </div>
                  </div>
                </div>
                <div class="card-body p-0" id="lines"></div>
              </div>
            </div>
            <div class="col col-xl-4">
              <div class="card" id="gender" style="height: 500px"></div>
            </div>
            <div class="col col-xl-8">
              <div class="card" id="map" style="height: 500px"></div>
            </div>
          </div>
          <!-- footer -->
          <div class="footer pt-5 pb-4 footer-light" id="footer-main">
            <div class="row text-center text-sm-left align-items-sm-center">
              <div class="col-sm-6">
                <p class="text-sm mb-0">
                  © 2022
                  <a href="https://itcast.cn" class="h6 text-sm" target="_blank"
                    >前端学科</a
                  >. All rights reserved.
                </p>
              </div>
              <div class="col-sm-6 mb-md-0">
                <ul class="nav justify-content-center justify-content-md-end">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Terms</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pr-0" href="#">Privacy</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./lib/china.js"></script>

    <script>
      const token = localStorage.getItem("CMS85");

      /* 什么情况才可以让用户直接访问index.html */
      if (!token) {
        location.href = "./login.html";
      }

      /* 1.显示登录的用户
       1.2获取本地存储里面的CMS-USERNAME的值
       1.3获取id=username的dom元素
        */
      const username = localStorage.getItem("CMS-USERNAME");
      document.querySelector("#username").innerHTML = username;

      //获取学生统计的数据
      // 2.1发送ajax获取学生统计数据
      axios({
        url: "/dashboard",
        //将token放在请求体里面携带
        // headers:{
        //   Authorization:localStorage.getItem('CMS85')
        // }
      }).then((res) => {
        //
        const { overview, year, salaryData, groupData, provinceData } =
          res.data;

        for (let k in overview) {
          document.querySelector(`[name=${k}]`).innerHTML = overview[k];
        }

        setLine(year);

        setPie(salaryData);

        setBar(groupData);

        setTwoPie(salaryData);

        initMapChartFn(provinceData);

        //男女薪资分布
      });

      // 退出功能
      //1.获取退出dom元素 注册点击事件
      document.querySelector("#logout").addEventListener("click", function () {
        if (confirm("是否确认退出")) {
          location.href = "./login.html";
          localStorage.clear();
        }
      });

      function setLine(arr) {
        const myChart = echarts.init(document.querySelector("#line"));
        const option = {
          //标题组件
          title: {
            //设置标题文字
            text: "2021全学科薪资走向",
            //设置标题字体样式
            textStyle: {
              color: "#eea520",
              fontSize: 16,
            },
            //标题布局  控制标题离容器左边多远
            left: 10,
            top: 15,
          },
          grid: {
            //控制整个内容离上面多远
            top: "20%",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: arr.map((item) => item.month),
            axisLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              data: arr.map((item) => item.salary),
              type: "line",
              //是否平滑曲线
              smooth: true,
              //标记大小
              symbolSize: 10,
              //区域填充样式
              areaStyle: {
                //线性渐变,前四个参数分别是x0,y0,x2,y2,范围从0-1,相对于在图形
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#499FEE",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(255,255,255,.2)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255,255,255,0)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              lineStyle: {
                width: 6,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#499FEE",
                    },

                    {
                      offset: 1,
                      color: "#5d75f0", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      }

      const setPie = (arr) => {
        //创建echarts实例对象
        const myChart = echarts.init(document.querySelector("#salary"));
        //配置对象
        const option = {
          title: {
            text: "班级薪资分布",
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
          },
          //图例组件
          legend: {
            bottom: "6%",
            left: "center",
          },
          series: [
            {
              name: "班级薪资分布",
              type: "pie",
              radius: ["50%", "64%"],
              center: ["50%", "45%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },

              labelLine: {
                show: false,
              },
              data: arr.map((item) => {
                return {
                  name: item.label,
                  value: item.g_count + item.b_count,
                };
              }),
            },
          ],
          color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
        };
        //调用
        myChart.setOption(option);
      };

      //班级薪资分布
      const setBar = (obj) => {
        const myChart = echarts.init(document.querySelector("#lines"));
        const option = {
          grid: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50,
          },
          tooltip: {
            trigger: "item",
          },
          xAxis: {
            type: "category",
            data: obj[1].map((item) => item.name),
            axisLine: {
              lineStyle: {
                color: "#ccc",
                type: "dashed",
              },
            },
            axisLabel: {
              color: "#999",
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              data: obj[1].map((item) => item.hope_salary),
              type: "bar",
              name: "期望薪资",
            },
            {
              data: obj[1].map((item) => item.salary),
              type: "bar",
              name: "就业薪资",
            },
          ],
          color: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#34D39A", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(52,211,154,0.2)", // 100% 处的颜色
                },
              ],
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#499FEE", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(73,159,238,0.2)", // 100% 处的颜色
                },
              ],
            },
          ],
        };
        myChart.setOption(option);

        ///tab栏切换
        //1.获取所有的button标签伪数组
        //2.循环注册点击事件forEach()
        //3.鼠标点击谁让谁高亮显示
        //4.排他
        const btns = document.querySelectorAll("#btns button");
        btns.forEach((item) => {
          item.addEventListener("click", function () {
            document
              .querySelector("#btns button.btn-blue")
              .classList.remove("btn-blue");
            item.classList.add("btn-blue");

            // 鼠标点击button让柱状图显示对应的组的数据
            // 1.获取鼠标点击的button中间的值
            // 2.让数据切换？obj对象通过对象的属性可以找到对应的组
            // 3.让配置对象里面对应的数据显示成对应组的数据
            // 4.重新让echarts  实例对象 的setOption  调用

            const num = item.innerHTML;
            console.log(num);
            option.xAxis.data = obj[num].map((item) => item.name);
            option.series[0].data = obj[num].map((item) => item.hope_salary);
            option.series[1].data = obj[num].map((item) => item.salary);
            myChart.setOption(option);
          });
        });
      };

      //男女薪资分布
      function setTwoPie(arr) {
        const myChart = echarts.init(document.querySelector("#gender"));
        const option = {
          title: [
            {
              text: "男女薪资分布",
              left: 10,
              top: 10,
              textStyle: {
                fontSize: 16,
              },
            },
            {
              text: "男生",
              left: "50%",
              top: "45%",
              textAlign: "center",
              textStyle: {
                fontSize: 12,
              },
            },
            {
              text: "女生",
              left: "50%",
              top: "85%",
              textAlign: "center",
              textStyle: {
                fontSize: 12,
              },
            },
          ],
          tooltip: {
            trigger: "item",
          },
          color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
          series: [
            {
              type: "pie",
              radius: 50,
              radius: ["20%", "30%"],
              center: ["50%", "30%"],
              datasetIndex: 1,
              data: arr.map((item) => {
                return {
                  name: item.label,
                  value: item.b_count,
                };
              }),
            },
            {
              type: "pie",
              radius: 50,
              radius: ["20%", "30%"],
              center: ["50%", "70%"],
              datasetIndex: 2,
              data: arr.map((item) => {
                return {
                  name: item.label,
                  value: item.g_count,
                };
              }),
            },
          ],
        };
        myChart.setOption(option);
      }

      //地图
      const initMapChartFn = (data) => {
        console.log(data);
        const myEchart = echarts.init(document.querySelector("#map"));

        const dataList = [
          { name: "南海诸岛", value: 0 },
          { name: "北京", value: 0 },
          { name: "天津", value: 0 },
          { name: "上海", value: 0 },
          { name: "重庆", value: 0 },
          { name: "河北", value: 0 },
          { name: "河南", value: 0 },
          { name: "云南", value: 0 },
          { name: "辽宁", value: 0 },
          { name: "黑龙江", value: 0 },
          { name: "湖南", value: 0 },
          { name: "安徽", value: 0 },
          { name: "山东", value: 0 },
          { name: "新疆", value: 0 },
          { name: "江苏", value: 0 },
          { name: "浙江", value: 0 },
          { name: "江西", value: 0 },
          { name: "湖北", value: 0 },
          { name: "广西", value: 0 },
          { name: "甘肃", value: 0 },
          { name: "山西", value: 0 },
          { name: "内蒙古", value: 0 },
          { name: "陕西", value: 0 },
          { name: "吉林", value: 0 },
          { name: "福建", value: 0 },
          { name: "贵州", value: 0 },
          { name: "广东", value: 0 },
          { name: "青海", value: 0 },
          { name: "西藏", value: 0 },
          { name: "四川", value: 0 },
          { name: "宁夏", value: 0 },
          { name: "海南", value: 0 },
          { name: "台湾", value: 0 },
          { name: "香港", value: 0 },
          { name: "澳门", value: 0 },
        ];

        dataList.forEach((item) => {
          const obj = data.find((pro) => pro.name.indexOf(item.name) !== -1);
          if (obj) item.value = obj.value;
        });

        let option = {
          title: {
            text: "籍贯分布",
            top: 10,
            left: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} 位学员",
            borderColor: "transparent",
            backgroundColor: "rgba(0,0,0,0.5)",
            textStyle: {
              color: "#fff",
            },
          },
          visualMap: {
            min: 0,
            max: 6,
            left: "left",
            bottom: "20",
            text: ["6", "0"],
            inRange: {
              color: ["#ffffff", "#0075F0"],
            },
            show: true,
            left: 40,
          },
          geo: {
            // 地理坐标系组件
            map: "china",
            roam: false,
            zoom: 1.0,
            label: {
              normal: {
                show: true,
                fontSize: "10",
                color: "rgba(0,0,0,0.7)",
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)",
                color: "#e0ffff",
              },
              emphasis: {
                areaColor: "#34D39A",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          series: [
            {
              name: "籍贯分布",
              type: "map",
              geoIndex: 0,
              data: dataList,
            },
          ],
        };
        myEchart.setOption(option);
      };


      //1.
    </script>
  </body>
</html>
